<template>
<Modal  title="编辑数据源字段"
        v-model="modalShow"
        width="80"
        @on-ok="onOk"
        @on-cancel="onCancel"
        :auto-close="false"
        :mask-closable="false">
    <Spin size="large" fix v-if="loading"></Spin> <!-- 加载动画 -->
    <div class="p-l-25 p-r-25">
        <div class="m-b-10">
            <span>原始列名</span>
            <span style="margin-left: 260px">列名</span>
        </div>
        <div style="max-height: 70vh; overflow-y: auto;" class="fix-scrollbar edit-column-form">
            <Form :model="obj" ref="columnForm" :label-width="320" label-position="left">
                <FormItem v-for="(column, cIndex) in obj.columnList" :key="cIndex"
                    :prop="'columnList.' + cIndex + '.columnName'"
                    :rules="{required: true, message: '请输入列名！'}"
                    class="111">
                    <span slot="label" :class="column.status == 1 ? '':'color-light-gray'">
                        <i :class="{'zlstbd-icon-text':column.dataType ==('string'),
                            'zlstbd-icon-numerical-value':dataTypeInfo.int.indexOf(column.dataType)!=-1,
                            'zlstbd-icon-date':dataTypeInfo.date.indexOf(column.dataType)!=-1}"></i>
                                {{column.originName}}
                    </span>
                    <Input v-model="column.columnName" style="width: 80%;" class="m-r-30" clearable></Input>
                    <tooltip content="禁用" placement="left" theme="light" v-if="column.status == 1">
                        <a @click="disable(cIndex)"><i class="zlstbd-icon-disable"></i></a>
                    </tooltip>
                    <tooltip content="启用" placement="left" theme="light" v-else>
                        <a @click="enable(cIndex)"><i class="zlstbd-icon-unlock"></i></a>
                    </tooltip>
                </FormItem>
            </Form>
        </div>
    </div>
</Modal>
</template>

<script>
import getData from 'getData'
export default {

    data () {
        return {
            datasourceId: null,
            modalShow: false,
            loading: false,
            obj: {
                columnList: []
            },
            dataTypeInfo:{
                int:'int,float,double',
                date:'date,timestamp'
            },
        }
    },

    methods: {
        init() {
            this.loading = true;
            getData.get('queryDsColumns', {}, this.datasourceId).then(res => {
                this.loading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.obj.columnList =  res.data.data;
                }
            });
        },

        show(datasourceId) {
            this.modalShow = true;
            this.datasourceId = datasourceId;
            this.init();
        },

        onOk() {
            this.$refs.columnForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    getData.post('batchUpdateColumns', {columnList: this.obj.columnList}).then(res => {
                        this.loading = false;
                        if (res.status == 200 && res.data.code == '000') {
                            this.$Message.success("编辑数据源列信息成功！");
                            this.$emit('refresh');
                            this.onCancel();
                        }
                    });
                }
            });
        },
        disable(index) {
            this.obj.columnList[index].status = 0;
            var column = this.obj.columnList[index];
            this.obj.columnList.splice(index, 1);
            this.obj.columnList.push(column);
        },

        enable(index) {
            this.obj.columnList[index].status = 1;
        },

        onCancel() {
            this.modalShow = false;
        }
    },
}
</script>

<style lang="less">
.edit-column-form {
    .ivu-form-item-required .ivu-form-item-label:before {
        content: '';
    }
}
</style>
